<!doctype html>
<html>
<head>
<meta charset="UTF-8">

<title>Tass Bar Lights</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">

	<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.css">
	<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
	<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
    	<link rel="stylesheet" href="lib/minicolors/jquery.minicolors.css">
	<script src="lib/minicolors/jquery.minicolors.min.js"></script>
	<style>
		.minicolors-panel {
			border: none !important;
			width: 150px;
			background: none !important;
		}
		.minicolors-slider {
			display: none !important;
		}
		
		.center {
			margin-left: auto;
			margin-right: auto;
			width: 150px;
			display: block;
		}
		
		.center-text {
			text-align: center;
		}
 	</style>
	<script>
	/*
		TODO brightness should always be 100%, so force this setting when receiving
		Do some AJAX calls to set and get data
	*/
	$(document).ready( function() {
		var color = $('#colorwheel').minicolors({
			control: "wheel",
			inline: true,
			defaultValue: "#FFAAFF",
			changeDelay: 100,
			change: function(hex) {
		 
			$.ajax({
				type : "GET",
				url : "http://192.168.2.150/rgb",
				data : "value=" + $(this).minicolors('rgbObject').r +"-"+$(this).minicolors('rgbObject').g + "-"+$(this).minicolors('rgbObject').b ,
				success : function(msg) {
					console.log("ajax call succeeded");
				}
			});
				/*console.log(hex);
				console.log($(this).minicolors('rgbObject').r);
				console.log($(this).minicolors('rgbString', [55, 55, 101]));*/
			}
		});
		
		//console.log(color.rgbObject());
	});
	</script>
	
</head>
<body>
	<div data-role="page">
		<div data-role="header">
			<h1>Bar Lights</h1>
		</div><!-- /header -->

		<div data-role="content">
			<p class="center-text">Change the color below</p>
			<span class="center">
				<input type="text" id="colorwheel" class="demo center" data-role="none">
			</span>
		</div><!-- /content -->
		
		<div data-role="footer">
			<h4>&copy; TASS</h4>
		</div><!-- /footer -->

	</div><!-- /page -->
</body>
</html>
